// import React from 'react';
import React from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';

/*const element = (
  <div className='title' style={{color:'red'}}>
    <span>hello</span>
    world
  </div>
)*/
//↕等价
const element = React.createElement(
  'div', {
    className: 'title',
    style: {
      color: 'red'
    }
  },
  React.createElement('span',null,'hello'),
  'world'
)

console.log(element);
console.log(JSON.stringify(element, null, 2));
/*
{
  "type": "div",
  "key": null,
  "ref": null,
  "props": {
    "className": "title",
    "style": {
      "color": "red"
    },
    "children": [
      {
        "type": "span",
        "key": null,
        "ref": null,
        "props": {
          "children": "hello"
        },
        "_owner": null,
        "_store": {}
      },
      "world"
    ]
  },
  "_owner": null,
  "_store": {}
}
*/
// 其实↑还有些不会被stringify的属性↓
/*
{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}

$$typeof: Symbol(react.element)
key: null
props: {className: "title", style: {…}, children: Array(2)}
ref: null
type: "div"
_owner: null
_store: {validated: false}
_self: null
_source: null
__proto__: Object
*/

console.log('React.createElement(\'123\'):',React.createElement('123'));
/*
React.createElement('123'):
{$$typeof: Symbol(react.element), type: "123", key: null, ref: null, props: {…}, …}

$$typeof: Symbol(react.element)
key: null
props: {}
ref: null
type: "123"
_owner: null
_store: {validated: false}
_self: null
_source: null
__proto__: Object
*/


ReactDOM.render(element, document.getElementById('root'));
